<template>
<el-row class="bid-box">
  <el-button @click="batchDownload(data.list)" class="fr btnmb">批量下载</el-button>
  <table class="Mtable">
    <tr class="bg">
      <th align="center" width="40"><el-checkbox v-model="data.check" @change="handleChange(data)"></el-checkbox></th>
      <th align="center" width="300">名称</th>
      <th align="center">上传时间</th>
      <th align="center">上传者</th>
      <th align="center">操作</th>
    </tr>
    <tbody v-for="(item, index) in data.list" :key="index">
      <tr>
        <td class="level2" colspan="5">
          <el-checkbox
            v-model="item.check"
            @change="handleChange(item, data)">
          </el-checkbox>
          {{item.rightsName}}
        </td>
      </tr>
      <tr class="bg" v-for="row in item.list" :key="row.id" v-if="item.list.length>0">
        <td align="left" colspan="2" class="level3">
          <el-checkbox
            class="fl"
            v-model="row.check"
            @change="handleChange(row, item)">
          </el-checkbox>
          <div class="fl">
            {{row.fodderName}}
          </div>
        </td>
        <td align="center">{{row.updateTime | FormatDate('yyyy-MM-dd HH:mm')}}</td>
        <td align="center">{{row.uploadUser}}</td>
        <td align="center">
          <el-button type="primary" @click="download(row)">下载</el-button>
        </td>
      </tr>
      <tr v-if="item.list.length == 0" class="bg">
        <td colspan="5" align="center">暂无数据</td>
      </tr>
    </tbody>
  </table>
</el-row>
</template>
<script>
  import {iframeDownload} from 'utils'
  export default{
    props: {
      datalist: Array
    },
    data () {
      return {
        data: {
          check: false,
          list: this.datalist
        }
      }
    },
    mounted () {
    },
    methods: {
      download (row) {
        if (row.fodderUrl) {
          iframeDownload({
            fileName: row.fooderName,
            fileUrl: row.fooderUrl
          })
        }
      },
      batchDownload (data) {
        console.log(data)
        data.forEach(item => {
          if (item.check) this.download(item)
          if (item.list && item.list.length > 0) this.batchDownload(item.list)
        })
      },
      handleChange (data, parent) {
        // 向下处理
        if (data.list) {
          if (data.check) {
            data.list = this.maplist(data.list, {check: true})
          } else {
            data.list = this.maplist(data.list, {check: false})
          }
        }
        // 向上处理
        if (parent) {
          let checknum = 0
          parent.list.forEach(item => {
            if (item.check) checknum++
          })
          parent.check = checknum === parent.list.length
          // 反向最后一级控制第一级
          if (parent !== this.data) {
            let allcheck = 0
            this.data.list.forEach(item => {
              if (item.check) allcheck++
            })
            this.data.check = allcheck === this.data.list.length
          }
          console.log('parent', checknum, parent.list.length, parent, data.check)
        }
      },
      maplist (list, option) {
        // 递归修改json的值
        let result = Object.assign([], list)
        result.forEach(item => {
          for (var m in option) {
            item[m] = option[m]
          }
          if (item.list) {
            this.maplist(item.list, option)
          }
        })
        return result
      }
    }
  }
</script>

<style lang="scss">
  @import '~styles/var.scss';
  .Mtable{
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #ececec;
    th, td{
      padding: 20px 10px;
    }
    .bg{
      background: #f5f5f5;
    }
    .level2{
      padding: 24px;
    }
    .level3{
      padding: 38px;
    }
    .fl{
      display: inline-block;
    }
  }
  .btnmb{
    margin-bottom: 15px;
  }
</style>
